<template>
  <div class="payment-success">
    <div class="success-content">
      <i class="el-icon-circle-check success-icon"></i>
      <h2>支付成功</h2>
      <p class="amount">￥{{ amount }}</p>
      <div class="btn-group">
        <el-button @click="viewOrder">查看订单</el-button>
        <el-button type="primary" @click="backToHome">返回首页</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const amount = ref('1999.00')

const viewOrder = () => {
  router.push('/seckill/orders')
}

const backToHome = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
.payment-success {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;

  .success-content {
    text-align: center;
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

    .success-icon {
      font-size: 60px;
      color: #52c41a;
      margin-bottom: 20px;
    }

    h2 {
      color: #333;
      margin-bottom: 15px;
    }

    .amount {
      font-size: 24px;
      color: #ff4d4f;
      font-weight: bold;
      margin-bottom: 30px;
    }

    .btn-group {
      display: flex;
      gap: 20px;
      justify-content: center;
    }
  }
}
</style>
